<template>
  <view class="basic-form">
    <view class="basic-form-title" v-if="title">
      <view class="basic-form-title-icon"></view>
      <view>{{ title }}</view>
    </view>


    <view class="basic-form-body">
      <slot></slot>
    </view>

  </view>
</template>

<script>


export default {
  props: {
    title: {
      type: String,
      default: ''
    },
  },

  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.basic-form {

  & > .basic-form-title {
    padding: 10px 0px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    color: #333333;

    & > .basic-form-title-icon {
      width: 4px;
      height: 16px;
      background: #FF4E63;
      margin-right: 10px;
    }
  }


  & > .basic-form-body {
    background: #FFFFFF;
    border-radius: 10px;
    margin: 0px 10px 5px;
  }


}

</style>
